<style lang="scss">
// 需要修改 twotwo
.xz-echarts-tt {
  height: 400px;
  width: 98%;
}
</style>

<template>
  <!-- // 需要修改 twotwo -->
  <div class="xz-echarts-tt" :id="name"></div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      // 需要修改 twotwo
      name: "xz-tt"
    };
  },
  created() {
    this.$nextTick(function() {
      // 需要修改 twotwo
      this.drow(this.name);
    });
  },
  methods: {
    drow(id) {
      this.charts = echarts.init(document.getElementById(id));
     this.charts.setOption({
        title: {
          text: "人事变动情况统计",
          x: "center",
          textStyle: {
            color: "rgb(255, 255, 255)",
            fontSize: 15
          }
        },
        color: ["#1e90ff", "rgb(255, 212, 0)", "#ff6347", "#32cd32", "#87cefa"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["招聘人数", "离职人数", "退休人数"],
          x: "center",
          y: "bottom",
          textStyle: {
            color: "rgb(255, 255, 255)",
            fontSize: 15
          }
        },
        toolbox: {
          show: false,
          feature: {
            mark: {
              show: false
            },
            dataView: {
              show: false,
              readOnly: true
            },
            magicType: {
              show: false,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: false
            }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ["2016年", "2017年", "2018年", "2019年"],
            axisLabel: {
              textStyle: {
                color: "rgb(255, 255, 255)"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              lineStyle: {
                color: "rgb(255, 255, 255)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgb(255, 255, 255)"
              }
            }
          }
        ],
        series: [
          {
            name: "招聘人数",
            type: "bar",
            data: [4.4, 2.6, 3.5, 4.6]
          },
          {
            name: "离职人数",
            type: "bar",
            data: [2.4, 4.4, 1.8, 2.8]
          },
          {
            type: "bar",
            name: "退休人数",
            data: [2, 2, 3, 5]
          }
        ]
      });

    }
  }
};
</script>
